<template>
  <!-- <div :style="{ border:' 1px dashed red' }" >
            <div>123321321321312321--test----{{msg}}</div>
            <div>123321321321312321--test----{{test1}}</div>
            <div>123321321321312321--test----{{msgC}}</div>
        <u-button type="error">危险按钮</u-button>
            <div>
             注册 <button @click="childPropMsg">小——》大点击给父组件发送数据</button>
            </div>

    </div> -->
    <div>
    <!-- <div>
     <u-navbar   back-text="返回" title="注册账号"></u-navbar>
    </div> -->
     <div class="registerP">
 
    <div class="user-pwd">
      <div class="userP">
        <img
          :style="{ width: '1.3rem' }"
          src="../../style/image/login/A6.png"
          alt=""
        />
        <div  class="inputC">
             <input    type="text" placeholder="账号" >
            </div>
       <div>
        <img  :style="{  width:'1rem' }" src="../../style/image/login/A3.png" alt="" />
       </div>
      </div>

      <div class="pwdP">
        <img
          :style="{ width: '1.3rem' }"
          src="../../style/image/login/A2.png"
          alt=""
        />
        <div  class="inputC">
             <input    type="text" placeholder="账号" >
            </div>
        <img   :style="{  width:'1rem' }" src="../../style/image/login/A4.png" alt="" />
      </div>

      <div class="pwdP">
        <img
          :style="{  width:'1.3rem' }"
          src="../../style/image/login/A2.png"
          alt=""
        />
         <div  class="inputC">
             <input    type="text" placeholder="确认密码" >
            </div>
        <img :style="{  width:'1rem' }" src="../../style/image/login/A4.png" alt="" />
      </div>

      <div class="pwdP">
        <img
          :style="{  width:'1.3rem' }"
          src="../../style/image/login/A5.png"
          alt=""
        />
         <div  class="inputC">
             <input    type="text" placeholder="获取验证码" >
            </div>
       <div :style="{ color:'#41c396',width:'5rem' }" >获取验证码</div>
      </div>
    </div>

    <div class="loginBtnP">
      <div class="loginBtn" @click="goRecommend"  >确认注册</div>
    </div>
  </div>
    
    </div>
    
 
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import '@/uview-ui/components/u-button/u-button.vue'
import uNavbar from '@/uview-ui//components/u-navbar/u-navbar.vue'


@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",

  //         filters:{
  //     Test(arg: string){
  //       return arg + "  我来刷点存在感"
  //     }
  //   },
  //   directives:{
  //     Test(arg: string){
  //       return arg + "  我来刷点存在感"
  //     }
  //   }
})
export default class extends Vue {
  // props: ['postTitle'],

  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  childMsg: string = "自组件的数据";

  //test:string=msg
  test1: string = "eqweqweqweqw";

  msgC: string = "子组件的msgC数据";

  created() {
  uni.showNavigationBarLoading()
  
    // wx.setNavigationBarTitle({
    //   title: "注册账号",
    // });

    console.log("313123123");
  }

  goBack(){
     console.log('123312')

           uni.navigateTo({
			url:"../login/index"
		})

    }

  goRecommend(){
  
     console.log(123)

     uni.navigateTo({
			url:"../register/recommend"
		})
  }

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
  }
//   onBackPress(options:any) {
//   console.log(options,'12312312312')
// 	// if (options.from === 'backbutton') {
// 	// 	if (this.editShow.edit) {
// 	// 		uni.showModal({
// 	// 			title: '提示',
// 	// 			content: '回执信息未保存，是否离开',
// 	// 			success: res => {
// 	// 				if (res.confirm) {
// 	// 					uni.navigateBack();
// 	// 				}
// 	// 			}
// 	// 		});
// 	// 		// 禁止默认返回
// 	// 		return true;
// 	// 	}
// 	// }
// }

  @Emit("bindSend") //@Emit()不传参数,那么它触发的事件名就是它所修饰的函数名.
  send(msgC: string) {
    //return 123      //如果没有返回值 那么传递的参数就是参数
  }

  childPropMsg() {
    //方法中获取this
    this.msgC = "子组件的msg数据,被传给了父组件";
    this.send(this.msgC);
  }

  @Watch("$route")
  routechange(to: any, from: any) {
    // if (to.query.name!=from.query.name) {
    // }
    console.log(to);
  }

  //         // dynamic component
  // 51   $refs!: {
  // 52     helloComponent: Hello
  // 53   }
}
</script>

<style  scoped>
.uni-page-head__title {
  font-weight: 400;
}

.registerP {
  padding: 1rem 2rem;

}
  .userP {
    display: flex;
    align-items: center;
    margin: 2rem 0rem 1rem 0rem;
    padding: 0.3125rem 0rem;
    border-bottom: 1px solid #dfdfdf;
    justify-content: space-between;
  }
  .pwdP {
    display: flex;
    align-items: center;
    margin: 2rem 0rem 1rem 0rem;
    padding: 0.3125rem 0rem;
    border-bottom: 1px solid #dfdfdf;
    justify-content: space-between;
  }
  .inputC{
     width: 80%;
     padding-left: 1rem;
  }

  .loginBtnP {
    width: 100%;
    display: flex;
    justify-content: center;
  
  }
    .loginBtn {
      width: 14rem;
      padding: 0.5rem;
      background-color: #02af74;
      border-radius: 0.5rem;
      color: white;
      text-align: center;
      font-size: 1.1rem;
    }

    .user-pwd{
       margin-bottom: 2rem;
    }

</style>